<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客登录页面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        /* 超小屏幕（手机，小于 768px） */
        /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

        /* 小屏幕（平板，大于等于 768px） */
        @media (min-width: 768px) {
            #slider-sub{
                width: 250px;
                margin-top: 51px;
                position: absolute;
                z-index: 1;
                background: #052b64;
                height: 900px;
            }
            .mysearch{
                margin: 10px 0;
            }
            /*右边核心区域的设置*/
            .page_main{
                margin-left: 255px;
            }
        }
        .update{
            background: #ffffff;
            border: 1px solid #dddddd;
            border-radius: 10px;
            margin: 10px;
            right: 45%;
            top: 50%;
        }
        body{
            background: url("https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/nanfen/bg2.jpg");
            color: #fff3cd;
        }
        .index-title{
            background: rgba(42, 101, 152,0.8);
            line-height: 80px;
            border-radius: 10px;
            margin-top: 5px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div  class="container">
    <div class="row index-title"  >
        <div class="col-md-3" style="display: flex;">
            <div>
                <img style="width: 80px;height: 50px" src="https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/nanfen/logo.jpg" alt="..." class="img-rounded">
            </div>
            <div style="margin-left: 10px">
                <h2>南风博客</h2>
            </div>
        </div>
        <div style="margin-top: 20px">
            <div class="col-md-1">
                <h4><a>主页</a></h4>
            </div>
            <div class="col-md-1">
                <h4><a>前端</a></h4>
            </div>
            <div class="col-md-1">
                <h4><a>vue</a></h4>
            </div>
            <div class="col-md-1">
                <h4><a>java</a></h4>
            </div>
            <div class="col-md-1">
                <h4><a>数据库</a></h4>
            </div>
            <div class="col-md-1">
                <h4><a>python</a></h4>
            </div>
            <div class="col-md-1">
                <h4><a>资料库</a></h4>
            </div>
            <div class="col-md-2" style="display: flex">
                <img style="width: 50px;height: 50px" src="https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/nanfen/logo.jpg" alt="..." class="img-circle">
                <h4 style="margin-left: 10px"><a>紫檀天香</a></h4>
            </div>
        </div>
    </div>
    <div style=" background: rgba(144, 147, 153,0.8);;padding: 10px;margin-top: 10px;border-radius: 10px">
        <div >
            <div class="row">
                <div class="col-sm-5 col-md-3" >
                    <div class="thumbnail">
                       <a href="/client/blogDetails">
                           <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                       </a>

                        <div class="caption">
                            <a href="/client/blogDetails">
                                <h5>这是一篇非常ok的博客</h5>
                                <p>简单的自我介绍...</p>
                            </a>

                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2486325051,3883556923&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2486325051,3883556923&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2486325051,3883556923&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3" >
                    <div class="thumbnail">
                        <img style="width: 100%;height: 120px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1565983731,2086572918&fm=26&gp=0.jpg" alt="...">
                        <div class="caption">
                            <h5>这是一篇非常ok的博客</h5>
                            <p>简单的自我介绍...</p>
                            <a href="#"  role="button">
                                <button type="button" class="btn btn-danger">点赞</button>
                            </a>
                            <a href="#"  role="button"><button type="button" class="btn btn-warning">收藏</button></a>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 10000</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--分页-->
        <div>
            <nav aria-label="...">
                <ul class="pagination">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                    <li class="active"><a href="#">2 <span class="sr-only">(current)</span></a></li>
                    <li class="active"><a href="#">3 <span class="sr-only">(current)</span></a></li>
                    <li class="active"><a href="#">4 <span class="sr-only">(current)</span></a></li>
                    <li class="active"><a href="#">5 <span class="sr-only">(current)</span></a></li>

                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>